<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="container">
        <div class="control">
            <button>选项1</button>
            <button>选项2</button>
            <button>选项3</button>
        </div>
        <div class="content">
            <div class="box">内容1</div>
            <div class="box">内容2</div>
            <div class="box">内容3</div>
        </div>
    </div>
    <script>

        function Table(button_seletor, content_seletor) {
            //    实例对象
            this.btns = document.querySelectorAll(button_seletor);
            this.content = document.querySelectorAll(content_seletor)
            this.index = 0;
            this.bindEvent();
            this.changeTable()
        }
        // 原型对象的方法
        // 1)按钮绑定的方法
        Table.prototype.bindEvent = function () {
            //this表示实例对象
            var self = this;
            //循环btns
            for (var i = 0; i < self.btns.length; i++) {
                // 设置dom对象下标
                self.btns[i].index = i;
                // 给所有按钮添加点击事件
                self.btns[i].onclick = function () {
                    // 获取当前点击按钮的下标

                    self.index = this.index;
                    self.changeTable();
                }

            }

        }
        // 2)切换页面的方法
        Table.prototype.changeTable = function () {
            var self = this;
            // 循环所有的content
            for (var i = 0; i < self.content.length; i++) {
                // 让所有的content隐藏
                self.content[i].style.display = 'none'
                // 让当前的content显示
                self.content[self.index].style.display = 'block'
            }
        }
        // 调用构造函数
        var res = new Table('.control button', '.box')
    </script>
</body>

</html>